<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义 CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Arial', sans-serif;
        }

        .register-container {
            max-width: 500px;
            margin: 100px auto;
            padding: 30px;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .register-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-weight: bold;
        }

        .form-control {
            border-radius: 5px;
            padding: 10px;
            border: 1px solid #ddd;
            margin-bottom: 15px;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }

        .btn-primary {
            width: 48%;
            padding: 10px;
            border-radius: 5px;
            background-color: #007bff;
            border: none;
            font-size: 16px;
        }

        .btn-primary:hover {
            background-color: #0056b3;
        }

        .alert {
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .text-danger {
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="register-container">
    <h2>用户注册</h2>
    <form method="post" id="registerForm" action="{% url 'register' %}">
        {% csrf_token %}  <!-- CSRF 令牌，防止跨站请求伪造攻击 -->
        <!-- 显示表单错误 -->
        {% if form.errors %}
            <div class="alert alert-danger">
                <strong>错误，请根据提示完成输入!</strong>
            </div>
        {% endif %}

        <!-- Username 字段 -->
        <div class="form-group">
            <label for="{{ form.username.id_for_label }}" class="form-label">用户名</label>
            <input type="text" name="username" id="id_username" class="form-control"
                   value="{{ form.username.value|default_if_none:'' }}" required>
            {% if form.username.errors %}
                <div class="text-danger">
                    {{ form.username.errors }}
                </div>
            {% endif %}
        </div>

        <!-- Password 字段 -->
        <div class="form-group">
            <label for="{{ form.password.id_for_label }}" class="form-label">密码</label>
            <input type="text" name="password" id="id_password" class="form-control" required>
            {% if form.password.errors %}
                <div class="text-danger">
                    {{ form.password.errors }}
                </div>
            {% endif %}
        </div>

        <!-- 确认密码 字段 使用前端阻止提交 -->
        <div class="form-group">
            <label for="{{ form.confirm_password.id_for_label }}" class="form-label">确认密码</label>
            <input type="text" name="confirm_password" id="confirm_password" class="form-control" required>
            {% if form.confirm_password.errors %}
                <div class="text-danger">
                    {{ form.confirm_password.errors }}
                </div>
            {% endif %}
        </div>

        <!-- email 字段 -->
        <div class="form-group">
            <label for="{{ form.email.id_for_label }}" class="form-label">邮箱</label>
            <input type="text" name="email" id="id_email" class="form-control" required>
            {% if form.email.errors %}
                <div class="text-danger">
                    {{ form.email.errors }}
                </div>
            {% endif %}
        </div>

        <!-- phone 字段 -->
        <div class="form-group">
            <label for="{{ form.phone.id_for_label }}" class="form-label">手机号</label>
            <input type="text" name="phone" id="id_phone" class="form-control" required>
            {% if form.phone.errors %}
                <div class="text-danger">
                    {{ form.phone.errors }}
                </div>
            {% endif %}
        </div>

         <!-- 地址 字段 -->
        <div class="form-group">
            <label for="{{ form.attr.id_for_label }}" class="form-label">地址</label>
            <input type="text" name="attr" id="id_attr" class="form-control" required>
            {% if form.attr.errors %}
                <div class="text-danger">
                    {{ form.attr.errors }}
                </div>
            {% endif %}
        </div>

        <!-- 提交按钮 -->
        <div class="form-group">
            <button type="button" onclick="window.location.href='{% url 'main' %}'" class="btn btn-primary" >返回首页</button>
            <button type="submit" class="btn btn-primary">注册</button>
        </div>
    </form>
</div>

<!-- 引入 Bootstrap 5 JS（可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
{#<script>#}
{#        // 确认密码失去焦点时校验#}
{#        document.getElementById('confirmPassword').addEventListener('blur', function () {#}
{#            var password = document.getElementById('password').value;#}
{#            var confirmPassword = this.value;#}
{#            var errorElement = document.getElementById('passwordError');#}
{##}
{#            if (password !== confirmPassword) {#}
{#                errorElement.style.display = 'inline';#}
{#            } else {#}
{#                errorElement.style.display = 'none';#}
{#            }#}
{#        });#}
{#        document.getElementById('confirm_password').addEventListener('submit', function(event) {#}
{#            var password = document.getElementById('password').value;#}
{#            var confirmPassword = document.getElementById('confirm_password').value;#}
{#            var errorElement = document.getElementById('passwordError');#}
{#            console.log(confirmPassword,password)#}
{#            if (password !== confirmPassword) {#}
{#                errorElement.style.display = 'inline';#}
{#                event.preventDefault(); // 阻止表单提交#}
{#            } else {#}
{#                errorElement.style.display = 'none';#}
{#            }#}
{#        });#}
{#    </script>#}
</body>
</html>